import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
// 自动导入 vue 中 hook reactive ref 等
import AutoImport from 'unplugin-auto-import/vite'
//自动导入 ui-组件 比如说 ant-design-vue element-plus 等
import Components from 'unplugin-vue-components/vite'
import px2rem from 'postcss-px2rem'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        // '@renderer': resolve('src/renderer/src'),
        '@renderer': resolve('src/renderer'),
        '@': resolve(__dirname, 'src/renderer')
      }
    },

    plugins: [
      vue(),
      AutoImport({
        //安装两行后你会发现在组件中不用再导入 ref，reactive 等
        imports: ['vue', 'vue-router'],
        //存放的位置
        dts: 'src/auto-import.d.ts'
      }),
      Components({
        // 引入组件的,包括自定义组件
        // 存放的位置
        dts: 'src/components.d.ts'
      })
    ],

    //配置全局 scss
    css: {
      //scss变量的配置
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./src/renderer/style/common.scss";'
        }
      }
      //px2rem的配置
      // loaderOptions: {
      //   postcss: {
      //     plugins: [
      //       px2rem({
      //         remUnit: 80 // 1rem，根据 设计稿宽度/10 进行设置  如果设计稿是1920 这⾥就是192
      //       })
      //     ]
      //   }
      // }
    }
  }
})
